<template>
    <div class="ifSickContainer">
        <div class="title"></div>
        <transition name="question" appear>
            <div class="question"></div>
        </transition>
        <div class="choose">
            <div class="yes" :style="setActive(yesActive)" @click="yesShow">
                <div class="point" :style="setpointActive(yesActive)"></div>
                <p>是的</p>
            </div>
            <div class="no" :style="setActive(noActive)" @click="notShow">
                <div class="point" :style="setpointActive(noActive)"></div>
                <p>不是</p>
            </div>
        </div>
        <div class="notNext" v-if="isShow"></div>
        <div class="next" v-if="!isShow" @click="gotoMyAge"></div>
    </div>
</template>

<script>
    export default {
        name:'ifSick',
        data(){
            return{
                yesActive:false,
                noActive:false,
            }
        },
        computed:{
            isShow:function(){
                if(this.yesActive || this.noActive)
                    return false
                else
                    return true
            },
        },
        methods:{
            yesShow(){
                this.yesActive=true
                this.noActive=false
            },
            notShow(){
                this.yesActive=false
                this.noActive=true
            },
            setActive(ifActive){
                return ifActive === true ? 'border: 1px solid #199efc; backgroundColor: #e5f4fe' : 'border: 1px solid #FFF ; backgroundColor: #FFF'
            },
            setpointActive(ifActive){
                return ifActive === true ? 'borderRight: 0.06rem solid #199efc' : 'borderRight: 0.06rem solid #F6F8FA'
            },
            gotoMyAge(){
                if(this.yesActive==true){
                    localStorage.setItem('isPcos',1)
                }
                else{
                    localStorage.setItem('isPcos',0)
                }
                this.$router.push({
                    name:`myAge`,
                })
            }
        }
    }
</script>

<style scoped>
    .ifSickContainer{
        width: 100vw;
        height: 100vh;
        background-color: #F6F8FA;
        position: relative;
        overflow: hidden;
    }
    .title{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-9sickKnow.png);
        width: 1.28rem;
        height: .68rem;
        background-position: center;
        background-size: contain;
        left: 3.1rem;
        top: 1.08rem;
    }
    .question{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-12ifSick.png);
        width: 5.92rem;
        height: 2.08rem;
        background-position: center;
        background-size: contain;
        left: 0.8rem;
        top:2.28rem;
    }
    .choose{
        width: 6.86rem;
        position: absolute;
        top:5.32rem;
        left: 0.32rem;
    }
    .choose>div{
        width: 100%;
        height: 1.5rem;
        background-color: #FFF;
        border-radius: .2rem;
        font-size: .28rem;
        color: #333333;
        font-family: 'PingFangSC-Regular';
        display: flex;
        align-items: center;
        border: 1px solid #FFF;
        transition: all 0.5s;
    }
    .choose>div:nth-child(2){
        margin-top: 0.6rem;
    }
    .point{
        margin-left: 1.2rem;
        height: 0.5rem;
        border-right: 0.06rem solid #F6F8FA;
        margin-right: 0.3rem;
        border-radius: 0.04rem;
        transition: all 0.5s;
    }
    .notNext{
        background-image: url(../assets/img/0-icon@2x/0-21notNext.png);
        width: 6.22rem;
        height: 0.88rem;
        position: absolute;
        top:13.7rem;
        left: 0.64rem;
        background-position: center;
        background-size: contain;
        border-radius: 0.4rem;
    }
    .next{
        background-image: url(../assets/img/0-icon@2x/0-20next.png);
        width: 6.22rem;
        height: 0.88rem;
        position: absolute;
        top:13.7rem;
        left: 0.64rem;
        background-position: center;
        background-size: contain;
        border-radius: 0.4rem;
    }
</style>